<template>
  <div class="contentDetailMain" ref="contentDetailMain">
    <div class="topContainer">
      <div class="mainInfoBox clearfix w1200">
        <div class="image">
          <img :src="contentDetailData.image ? contentDetailData.image : defaultImg" alt="">
        </div>
        <div class="mainInfo">
          <div class="title clearfix">
            <h3>{{ contentDetailData.title }}</h3>
          </div>
          <div class="classification">
            <h4>所属栏目：{{ contentDetailData.columnName ? contentDetailData.columnName : '暂无栏目信息' }}</h4>
            <p>作者：{{ contentDetailData.author ? contentDetailData.author : '暂无作者信息' }}</p>
            <p style="text-align: right;">
              发布时间：{{ contentDetailData.publishTime ? contentDetailData.publishTime : '暂无发布时间' }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="subContainer">
      <div class="contentBox clearfix w1200">
        <div class="leftBox">
          <div class="birefBox">{{ contentDetailData.remark }}</div>
          <div v-html="contentDetailData.content"></div>
          <!--评论-->
          <div class="commentListBox" :style="{'padding-bottom': isFocusBig ? 0 : '70px'}">
            <div class="commentTextareaBox">
              <el-input
                type="textarea"
                :rows="4"
                placeholder="写下你的评论..."
                maxlength="100"
                show-word-limit
                v-model="commentContent"
                @focus="isFocusBig = true;"
                @keydown.enter.native="ctrlEnterHandler"
              >
              </el-input>
              <div class="btnBox flex align-center justify-between" :class="{isFocusBig}">
                <span>按 Ctrl+Enter 发表</span>
                <div>
                  <el-button type="primary" round size="mini" @click="submitCommentHandler">提交</el-button>
                  <el-button round size="mini" @click="isFocusBig = false; commentContent = '';">取消</el-button>
                </div>
              </div>
            </div>
            <h2 class="flex align-center">
              <i class="el-icon-s-comment"></i> 全部评论 {{ $store.getters.contentEvaluationNum }}
            </h2>
            <Evaluation :columnId="contentDetailData.columnId" ref="evaluationList"/>
          </div>
        </div>
        <div class="rightBox" :class="{fixed}">
          <div class="attachmentListBox">
            <h2>相关附件</h2>
            <div class="attachmentList">
              <Accessory :list="attachmentList"/>
              <div class="noDataBox flex align-center justify-center" v-if="attachmentList.length === 0">
                <el-empty description="暂无附件信息"></el-empty>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="commentContainer" ref="commentContainer" :class="{marginLeft: sidebar.opened}" v-if="!isFocusBig">
      <div class="commentInputMain w1200">
        <div class="commentInputBox flex align-end">
          <div class="inputBox" :class="{isFocus: !isFocus}">
            <el-input
              type="textarea"
              :rows="isFocus ? 3 : 1"
              placeholder="写下你的评论..."
              maxlength="100"
              show-word-limit
              v-model="commentContent"
              @focus="isFocus = true;"
            >
            </el-input>
          </div>
          <div class="btnBox" v-if="isFocus">
            <el-button type="primary" round size="mini" @click="submitCommentHandler">提交</el-button>
            <el-button round size="mini" @click="isFocus = false; commentContent = '';">取消</el-button>
          </div>
          <div class="commentNum flex align-center" v-else>
          <span class="flex align-center" @click="toEvaluationPosition">
            <i class="el-icon-s-comment"></i>
            评论 {{ $store.getters.contentEvaluationNum }}
          </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {contentDetail} from "@/api/model/column"
import Accessory from './model/Accessory';
import Evaluation from './model/Evaluation';
import {mapGetters} from "vuex";
import {submitComment} from "@/api/model/comment";

export default {
  name: '',
  props: {},
  components: {
    Accessory,
    Evaluation
  },
  data() {
    return {
      appWrapper: null,
      fixed: false,
      id: this.$route.params.id,
      contentDetailData: {},
      attachmentList: [],
      defaultImg: require('@/assets/images/portalWebsite/model01.png'),
      commentContent: '',
      isFocus: false,
      isFocusBig: false
    }
  },
  computed: {
    ...mapGetters(["sidebar"]),
  },
  watch: {},
  created() {
    this.getContentDetail();
  },
  mounted() {
    this.$nextTick(() => {
      this.appWrapper = this.$refs.contentDetailMain;
      this.appWrapper.addEventListener("scroll", this.scrollFixedHeader, true);
    })
  },
  destroyed() {
    this.appWrapper.removeEventListener("scroll", this.scrollFixedHeader, true);
  },
  methods: {
    scrollFixedHeader(e) {
      let scrollTop = this.appWrapper.scrollTop;
      this.fixed = scrollTop > 454;
    },
    async getContentDetail() {
      const {code, data} = await contentDetail(this.id);
      if (code === 200) {
        this.contentDetailData = data;
        this.attachmentList = data.attachment ? JSON.parse(data.attachment) : [];
      }
    },
    toEvaluationPosition() {
      console.log(this.$refs.commentContainer);
    },
    submitCommentHandler() {
      let params = {
        content: this.commentContent,
        columnId: this.contentDetailData.columnId,
        source: 1
      };
      if (params.content === '') {
        this.$message({
          message: '请输入评论内容',
          type: 'warning'
        });
        return;
      }
      submitComment(params).then((response) => {
        if (response.code === 200) {
          this.$modal.msgSuccess("新增成功");
          this.isFocus = false;
          this.isFocusBig = false;
          this.commentContent = "";
          this.$refs.evaluationList.getCommentList(this.contentDetailData.columnId);
        } else {
          this.$message({
            message: response.msg,
            type: 'warning'
          });
        }
      });
    },
    ctrlEnterHandler(e) {
      if (e.ctrlKey && e.keyCode == 13) this.submitCommentHandler();
    }
  },
}
</script>
<style lang="scss" scoped>
@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

.contentDetailMain {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow-x: hidden;
  @include scrollBar;

  .topContainer {
    padding: 55px 0;
    background: #fff;
    box-shadow: 0 8px 16px 0 rgba(28, 31, 33, .1);

    .mainInfoBox {
      .image {
        width: 400px;
        height: 225px;
        overflow: hidden;
        float: left;
        border-radius: 8px;

        img {
          display: block;
          width: 100%;
        }
      }

      .mainInfo {
        width: calc(100% - 430px);
        float: right;

        .title {
          h3 {
            font-size: 24px;
            color: #333333;
            font-weight: 600;
            margin: 0;
            padding: 0;
            line-height: 36px;
            float: left;
            text-align: justify;
          }

          span {
            width: 120px;
            float: right;
            line-height: 36px;
            font-size: 16px;
            color: #666;
            cursor: pointer;

            i {
              font-size: 20px;
              margin-right: 5px;
            }

            &:hover {
              color: #294199;
            }

            &.active {
              color: #294199;
            }
          }
        }

        .classification {
          margin-top: 16px;
          padding: 4px 19px 16px 16px;
          margin-bottom: 24px;
          background-color: #f8f9fb;
          border-radius: 8px;

          h4 {
            margin: 0;
            padding: 5px 0 0;
            color: #333;
            line-height: 32px;
            font-size: 14px;
          }

          p {
            color: #333;
            font-size: 14px;
            padding: 0;
            margin: 5px 0 0;
            line-height: 18px;
          }
        }
      }
    }
  }

  .subContainer {
    padding: 20px 0 0;

    .birefBox {
      background-color: #F5F8F4;
      padding: 20px;
      margin-bottom: 30px;
      color: #333333;
      border-radius: 4px;
      font-size: 14px;
      line-height: 22px;
      text-indent: 2em;
    }

    .contentBox {
      padding-bottom: 24px;

      .leftBox {
        width: 824px;
        float: left;
        margin-top: 22px;
      }

      .rightBox {
        width: 328px;
        float: right;
        overflow-x: hidden;
        @include scrollBar;

        &.fixed {
          position: fixed;
          height: calc(100% - 85px);
          top: 90px;
          margin-left: 872px;
        }
      }
    }
  }
}

.w1200 {
  width: 1200px !important;
  margin: 0 auto;
}

.attachmentListBox {
  border-bottom: 2px solid #f1f1f1;
  padding-bottom: 24px;
  padding-top: 24px;

  > h2 {
    font-size: 16px;
    color: #07111b;
    font-weight: 700;
    margin: 0 0 24px;
  }
}

.noDataBox {
  height: 400px;
}

//评论
.commentContainer {
  box-shadow: 0 -8px 16px 0 rgba(28, 31, 33, 0.1);
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #fff;
  margin-left: 27px;
  transition: all 0.22s;
  padding: 15px 0;

  &.marginLeft {
    margin-left: 100px;
  }

  .commentInputMain {
    .commentInputBox {
      width: 824px;
      overflow: hidden;

      .inputBox {
        width: calc(100% - 200px);

        ::v-deep .el-textarea__inner {
          resize: none;
          background: #f2f2f2;
          border: none;
        }

        ::v-deep .el-input__count {
          background: none;
        }

        &.isFocus {
          ::v-deep .el-textarea__inner {
            border-radius: 33px;
          }
        }
      }

      .commentNum, .btnBox {
        width: 185px;
        padding-left: 15px;
      }

      .commentNum {
        height: 33px;

        span {
          font-size: 14px;
          color: #999;
          cursor: pointer;

          i {
            font-size: 26px;
            color: #999;
            margin-right: 5px;
          }
        }
      }
    }
  }
}

.commentListBox {
  border-top: 4px solid #f2f2f2;
  padding-top: 15px;
  margin-top: 20px;

  h2 {
    font-size: 16px;
    color: #333;

    i {
      font-size: 20px;
      margin-right: 5px;
    }
  }

  .commentTextareaBox {
    ::v-deep .el-textarea__inner {
      resize: none;
      background: #fff;
      border: none;
    }

    ::v-deep .el-input__count {
      background: none;
    }

    .btnBox {
      height: 0;
      overflow: hidden;
      transition: all 0.2s;
      margin-bottom: 30px;

      &.isFocusBig {
        height: 60px;
        margin-bottom: 0;
      }

      span {
        font-size: 14px;
        color: #999;
      }
    }
  }
}
</style>
